<template>
<view class="container">
  <view class="address-list" v-if="accountTraceList.length > 0">
    <view v-for="(item, index) in accountTraceList" :key="index" class="item" :data-address-id="item.id">
      <view class="l">
        <view class="name">{{item.amount}}</view>
        <view class="default" v-if="item.status == 1">审批通过</view>
        <view class="default" v-if="item.status == 2">审批拒绝</view>
        <view class="default" v-if="item.status == 0">申请中</view>
      </view>
      <view class="c">
        <view class="mobile" v-if="item.type == 1">个人申请</view>
        <view class="mobile" v-if="item.type == 0">系统月结</view>
        <view class="address">时间：{{item.addTime}}</view>
      </view>
      <view class="r">
        <view class="del">总额：{{item.totalAmount}}</view>
      </view>
    </view>
  </view>
  <view class="empty-view" v-if="recordList.length <= 0">
    <image class="icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/noAddress-26d570cefa.png"></image>
    <text class="text">您尚未有提现记录，努力加油推广吧!</text>
  </view>
</view>
</template>

<script>
let util = require("../../../utils/util.js");
let api = require("../../../config/api.js");
let app = getApp();

export default {
  data() {
    return {
      accountTraceList: [],
      page: 1,
      size: 10,
      totalPages: 1
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {// 页面渲染完成
  },
  onShow: function () {
    // 页面显示
    this.getRecordList();
  },
  onHide: function () {// 页面隐藏
  },
  onUnload: function () {// 页面关闭
  },
  methods: {
    getRecordList() {
      let that = this;
      util.request(api.ExtractList, {
        page: that.page,
        size: that.size
      }).then(function (res) {
        if (res.errno === 0) {
          console.log(res.data);
          that.setData({
            accountTraceList: res.data.accountTraceList,
            totalPages: res.data.totalPages
          });
        }
      });
    }

  }
};
</script>
<style>
page {
  height: 100%;
  width: 100%;
  background: #f4f4f4;
}

.container {
  height: 100%;
  width: 100%;
}

.address-list {
  padding-left: 31.25rpx;
  background: #fff;
  background-size: auto 10.5rpx;
  margin-bottom: 90rpx;
}

.address-list .item {
  height: 156.55rpx;
  align-items: center;
  display: flex;
  border-bottom: 1rpx solid #dcd9d9;
}

.address-list .l {
  width: 135rpx;
  height: 80rpx;
  overflow: hidden;
}

.address-list .name {
  width: 155rpx;
  height: 43rpx;
  font-size: 29rpx;
  color: #333;
  margin-bottom: 5.2rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.address-list .default {
  width: 82.5rpx;
  height: 33rpx;
  line-height: 28rpx;
  text-align: center;
  font-size: 20rpx;
  color: #b4282d;
  border: 1rpx solid #b4282d;
  visibility: visible;
}

.address-list .c {
  flex: 1;
  height: auto;
  overflow: hidden;
}

.address-list .mobile {
  height: 29rpx;
  font-size: 29rpx;
  line-height: 29rpx;
  overflow: hidden;
  color: #333;
  margin-bottom: 6.25rpx;
}

.address-list .address {
  height: 37rpx;
  font-size: 25rpx;
  line-height: 37rpx;
  overflow: hidden;
  color: #666;
}

.address-list .r {
  width: 252rpx;
  height: auto;
  overflow: hidden;
  margin-right: 16.5rpx;
}

.address-list .del {
  display: block;
  width: 252rpx;
  height: 52rpx;
  padding-left: 40rpx;
}

.add-address {
  border: none;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 90rpx;
  line-height: 98rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  margin-left: 5%;
  text-align: center;
  /* padding-left: -5rpx; */
  font-size: 25rpx;
  color: #f4f4f4;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  letter-spacing: 3rpx;
  background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);
}

.empty-view {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-view .icon {
  height: 248rpx;
  width: 258rpx;
  margin-bottom: 10rpx;
}

.empty-view .text {
  width: auto;
  font-size: 28rpx;
  line-height: 35rpx;
  color: #999;
}

</style>